<script setup lang="ts">
import type {
  AuditEvent,
  ComplianceResult,
  GovernanceFacet,
  Policy,
} from '#/api/resource-center/types';

import { computed, reactive, ref } from 'vue';

import { IconifyIcon } from '@vben/icons';

import { message } from 'ant-design-vue';

// Props
interface Props {
  governance?: GovernanceFacet;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  update: [governance: GovernanceFacet];
}>();

// 响应式数据
const policyModalVisible = ref(false);
const violationDetailModalVisible = ref(false);
const auditDetailModalVisible = ref(false);
const editingPolicy = ref<null | Policy>(null);
const selectedViolation = ref<ComplianceResult | null>(null);
const selectedAuditEvent = ref<AuditEvent | null>(null);

// 表单数据
const policyForm = reactive({
  name: '',
  type: 'ACCESS_CONTROL',
  description: '',
  priority: 'MEDIUM',
  enforcement: 'ENFORCE',
  conditions: [] as any[],
  actions: [] as any[],
});

const auditFilter = reactive({
  type: '',
  dateRange: null as any,
});

// 计算属性
const governance = computed(
  () =>
    props.governance || {
      policies: [],
      complianceResults: [],
      auditLogs: [],
    },
);

const complianceScore = computed(() => {
  const results = governance.value.complianceResults || [];
  if (results.length === 0) return 100;
  const passed = results.filter((r) => r.status === 'PASSED').length;
  return Math.round((passed / results.length) * 100);
});

const violationCount = computed(
  () =>
    governance.value.complianceResults?.filter((r) => r.status === 'VIOLATED')
      .length || 0,
);

const auditEventCount = computed(() => governance.value.auditLogs?.length || 0);

// 模拟数据
const complianceResults = ref([
  {
    id: '1',
    policyName: '数据访问控制',
    status: 'PASSED',
    severity: 'MEDIUM',
    timestamp: new Date().toISOString(),
    description: '数据访问权限检查通过',
    scope: '用户数据',
    recommendation: '继续保持当前配置',
  },
  {
    id: '2',
    policyName: '资源使用限制',
    status: 'VIOLATED',
    severity: 'HIGH',
    timestamp: new Date().toISOString(),
    description: '资源使用量超过限制',
    scope: '计算资源',
    recommendation: '优化资源使用或申请更多配额',
  },
]);

const auditLogs = ref([
  {
    id: '1',
    eventType: 'CREATE',
    timestamp: new Date().toISOString(),
    user: 'admin',
    ipAddress: '192.168.1.100',
    resource: '/api/resources/123',
    action: '创建资源',
    result: '成功',
    details: { resourceId: '123', resourceType: 'compute' },
  },
  {
    id: '2',
    eventType: 'ACCESS',
    timestamp: new Date().toISOString(),
    user: 'user1',
    ipAddress: '192.168.1.101',
    resource: '/api/resources/456',
    action: '访问资源',
    result: '成功',
    details: { resourceId: '456', accessType: 'read' },
  },
]);

// 表格列定义
const complianceColumns = [
  { title: '策略名称', dataIndex: 'policyName', key: 'policyName' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '严重程度', dataIndex: 'severity', key: 'severity' },
  { title: '发现时间', dataIndex: 'timestamp', key: 'timestamp' },
  { title: '操作', key: 'action' },
];

const auditColumns = [
  { title: '事件类型', dataIndex: 'eventType', key: 'eventType' },
  { title: '时间', dataIndex: 'timestamp', key: 'timestamp' },
  { title: '用户', dataIndex: 'user', key: 'user' },
  { title: '资源', dataIndex: 'resource', key: 'resource' },
  { title: '操作', key: 'action' },
];

// 方法
const getPolicyStatusColor = (status?: string) => {
  const colorMap: Record<string, string> = {
    ENABLED: 'green',
    DISABLED: 'gray',
    DRAFT: 'orange',
  };
  return colorMap[status || ''] || 'default';
};

const getPolicyStatusLabel = (status?: string) => {
  const labelMap: Record<string, string> = {
    ENABLED: '启用',
    DISABLED: '禁用',
    DRAFT: '草稿',
  };
  return labelMap[status || ''] || status || '未知';
};

const getPolicyTypeLabel = (type?: string) => {
  const labelMap: Record<string, string> = {
    ACCESS_CONTROL: '访问控制',
    DATA_PROTECTION: '数据保护',
    RESOURCE_LIMITS: '资源限制',
    COMPLIANCE: '合规性',
    SECURITY: '安全性',
  };
  return labelMap[type || ''] || type || '未知';
};

const getPolicyPriorityLabel = (priority?: string) => {
  const labelMap: Record<string, string> = {
    LOW: '低',
    MEDIUM: '中',
    HIGH: '高',
    CRITICAL: '严重',
  };
  return labelMap[priority || ''] || priority || '未知';
};

const getComplianceStatusColor = (status?: string) => {
  const colorMap: Record<string, string> = {
    PASSED: 'green',
    VIOLATED: 'red',
    WARNING: 'orange',
  };
  return colorMap[status || ''] || 'default';
};

const getComplianceStatusLabel = (status?: string) => {
  const labelMap: Record<string, string> = {
    PASSED: '通过',
    VIOLATED: '违规',
    WARNING: '警告',
  };
  return labelMap[status || ''] || status || '未知';
};

const getAuditEventColor = (eventType?: string) => {
  const colorMap: Record<string, string> = {
    CREATE: 'green',
    UPDATE: 'blue',
    DELETE: 'red',
    ACCESS: 'orange',
  };
  return colorMap[eventType || ''] || 'default';
};

const getAuditEventLabel = (eventType?: string) => {
  const labelMap: Record<string, string> = {
    CREATE: '创建',
    UPDATE: '更新',
    DELETE: '删除',
    ACCESS: '访问',
  };
  return labelMap[eventType || ''] || eventType || '未知';
};

const formatConditions = (conditions: any[]) => {
  return conditions
    .map((c) => `${c.field} ${c.operator} ${c.value}`)
    .join(' AND ');
};

const formatDate = (date?: string) => {
  if (!date) return '未设置';
  return new Date(date).toLocaleString('zh-CN');
};

// 策略管理方法
const showAddPolicyModal = () => {
  editingPolicy.value = null;
  resetPolicyForm();
  policyModalVisible.value = true;
};

const editPolicy = (policy: Policy) => {
  editingPolicy.value = policy;
  policyForm.name = policy.name;
  policyForm.type = policy.type;
  policyForm.description = policy.description || '';
  policyForm.priority = policy.priority;
  policyForm.enforcement = policy.enforcement;
  policyForm.conditions = [...(policy.conditions || [])];
  policyForm.actions = [...(policy.actions || [])];
  policyModalVisible.value = true;
};

const savePolicy = () => {
  if (!policyForm.name || !policyForm.description) {
    message.error('请填写策略名称和描述');
    return;
  }

  const newPolicy: Policy = {
    id: editingPolicy.value?.id || `policy_${Date.now()}`,
    name: policyForm.name,
    type: policyForm.type,
    description: policyForm.description,
    priority: policyForm.priority,
    enforcement: policyForm.enforcement,
    conditions: policyForm.conditions,
    actions: policyForm.actions,
    status: 'ENABLED',
  };

  const currentPolicies = governance.value.policies || [];
  let newPolicies: Policy[];

  newPolicies = editingPolicy.value
    ? currentPolicies.map((p) =>
        p.id === editingPolicy.value!.id ? newPolicy : p,
      )
    : [...currentPolicies, newPolicy];

  emit('update', { ...governance.value, policies: newPolicies });
  message.success(editingPolicy.value ? '策略更新成功' : '策略添加成功');
  policyModalVisible.value = false;
  resetPolicyForm();
};

const cancelPolicy = () => {
  policyModalVisible.value = false;
  resetPolicyForm();
};

const resetPolicyForm = () => {
  policyForm.name = '';
  policyForm.type = 'ACCESS_CONTROL';
  policyForm.description = '';
  policyForm.priority = 'MEDIUM';
  policyForm.enforcement = 'ENFORCE';
  policyForm.conditions = [];
  policyForm.actions = [];
};

const deletePolicy = (policyId: string) => {
  const newPolicies =
    governance.value.policies?.filter((p) => p.id !== policyId) || [];
  emit('update', { ...governance.value, policies: newPolicies });
  message.success('策略删除成功');
};

const togglePolicy = (policyId: string, enabled: boolean) => {
  const newPolicies =
    governance.value.policies?.map((p) =>
      p.id === policyId
        ? { ...p, status: enabled ? 'ENABLED' : 'DISABLED' }
        : p,
    ) || [];
  emit('update', { ...governance.value, policies: newPolicies });
  message.success(`策略${enabled ? '启用' : '禁用'}成功`);
};

const testPolicy = (policy: Policy) => {
  message.info(`测试策略: ${policy.name}`);
};

// 条件编辑器方法
const addCondition = () => {
  policyForm.conditions.push({
    field: 'resource.type',
    operator: 'EQ',
    value: '',
  });
};

const removeCondition = (index: number) => {
  policyForm.conditions.splice(index, 1);
};

// 动作编辑器方法
const addAction = () => {
  policyForm.actions.push({
    type: 'ALLOW',
    parameters: '',
  });
};

const removeAction = (index: number) => {
  policyForm.actions.splice(index, 1);
};

// 合规检查方法
const runComplianceCheck = () => {
  message.success('合规检查已启动，请稍后查看结果');
};

const viewViolationDetail = (violation: ComplianceResult) => {
  selectedViolation.value = violation;
  violationDetailModalVisible.value = true;
};

// 审计日志方法
const filterAuditLogs = () => {
  message.info('筛选审计日志');
};

const viewAuditDetail = (auditEvent: AuditEvent) => {
  selectedAuditEvent.value = auditEvent;
  auditDetailModalVisible.value = true;
};
</script>

<template>
  <div class="resource-governance">
    <!-- 治理管理头部 -->
    <div class="governance-header">
      <h3>治理管理</h3>
      <a-space>
        <a-button type="primary" @click="showAddPolicyModal">
          <template #icon>
            <IconifyIcon icon="ant-design:plus-outlined" />
          </template>
          添加策略
        </a-button>
        <a-button @click="runComplianceCheck">
          <template #icon>
            <SafetyOutlined />
          </template>
          合规检查
        </a-button>
      </a-space>
    </div>

    <!-- 治理概览 -->
    <a-card title="治理概览" class="governance-card">
      <a-row :gutter="16">
        <a-col :span="6">
          <a-statistic
            title="治理策略"
            :value="governance?.policies?.length || 0"
          />
        </a-col>
        <a-col :span="6">
          <a-statistic title="合规状态" :value="complianceScore" suffix="%" />
        </a-col>
        <a-col :span="6">
          <a-statistic title="违规项" :value="violationCount" />
        </a-col>
        <a-col :span="6">
          <a-statistic title="审计事件" :value="auditEventCount" />
        </a-col>
      </a-row>
    </a-card>

    <!-- 治理策略 -->
    <a-card title="治理策略" class="governance-card">
      <div class="policies-section">
        <a-empty
          v-if="!governance?.policies?.length"
          description="暂无治理策略"
        />

        <div v-else class="policies-list">
          <a-card
            v-for="policy in governance.policies"
            :key="policy.id"
            class="policy-card"
            size="small"
          >
            <template #title>
              <div class="policy-title">
                <span>{{ policy.name }}</span>
                <a-tag
                  :color="getPolicyStatusColor(policy.status)"
                  size="small"
                >
                  {{ getPolicyStatusLabel(policy.status) }}
                </a-tag>
              </div>
            </template>

            <div class="policy-info">
              <p>
                <strong>类型:</strong> {{ getPolicyTypeLabel(policy.type) }}
              </p>
              <p><strong>描述:</strong> {{ policy.description }}</p>
              <p>
                <strong>优先级:</strong>
                {{ getPolicyPriorityLabel(policy.priority) }}
              </p>
              <p v-if="policy.conditions">
                <strong>条件:</strong> {{ formatConditions(policy.conditions) }}
              </p>
            </div>

            <div class="policy-actions">
              <a-button type="link" size="small" @click="editPolicy(policy)">
                编辑
              </a-button>
              <a-button
                v-if="policy.status === 'ENABLED'"
                type="link"
                size="small"
                @click="togglePolicy(policy.id, false)"
              >
                禁用
              </a-button>
              <a-button
                v-else
                type="link"
                size="small"
                @click="togglePolicy(policy.id, true)"
              >
                启用
              </a-button>
              <a-button type="link" size="small" @click="testPolicy(policy)">
                测试
              </a-button>
              <a-popconfirm
                title="确定要删除这个策略吗？"
                @confirm="deletePolicy(policy.id)"
              >
                <a-button type="link" size="small" danger>删除</a-button>
              </a-popconfirm>
            </div>
          </a-card>
        </div>
      </div>
    </a-card>

    <!-- 合规检查 -->
    <a-card title="合规检查" class="governance-card">
      <div class="compliance-section">
        <a-button
          @click="runComplianceCheck"
          type="primary"
          style="margin-bottom: 16px"
        >
          <SafetyOutlined />
          运行合规检查
        </a-button>

        <div v-if="complianceResults.length > 0" class="compliance-results">
          <a-table
            :columns="complianceColumns"
            :data-source="complianceResults"
            :pagination="false"
            size="small"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'status'">
                <a-tag :color="getComplianceStatusColor(record.status)">
                  {{ getComplianceStatusLabel(record.status) }}
                </a-tag>
              </template>
              <template v-else-if="column.key === 'action'">
                <a-button
                  type="link"
                  size="small"
                  @click="viewViolationDetail(record)"
                >
                  详情
                </a-button>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </a-card>

    <!-- 审计日志 -->
    <a-card title="审计日志" class="governance-card">
      <div class="audit-section">
        <a-row :gutter="16" style="margin-bottom: 16px">
          <a-col :span="8">
            <a-select
              v-model:value="auditFilter.type"
              placeholder="选择事件类型"
              allow-clear
              style="width: 100%"
            >
              <a-select-option value="CREATE">创建</a-select-option>
              <a-select-option value="UPDATE">更新</a-select-option>
              <a-select-option value="DELETE">删除</a-select-option>
              <a-select-option value="ACCESS">访问</a-select-option>
            </a-select>
          </a-col>
          <a-col :span="8">
            <a-range-picker
              v-model:value="auditFilter.dateRange"
              style="width: 100%"
            />
          </a-col>
          <a-col :span="8">
            <a-button @click="filterAuditLogs" type="primary"> 筛选 </a-button>
          </a-col>
        </a-row>

        <a-table
          :columns="auditColumns"
          :data-source="auditLogs"
          :pagination="{ pageSize: 10 }"
          size="small"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'eventType'">
              <a-tag :color="getAuditEventColor(record.eventType)">
                {{ getAuditEventLabel(record.eventType) }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'action'">
              <a-button
                type="link"
                size="small"
                @click="viewAuditDetail(record)"
              >
                详情
              </a-button>
            </template>
          </template>
        </a-table>
      </div>
    </a-card>

    <!-- 添加策略模态框 -->
    <a-modal
      v-model:open="policyModalVisible"
      :title="editingPolicy ? '编辑策略' : '添加策略'"
      width="800px"
      @ok="savePolicy"
      @cancel="cancelPolicy"
    >
      <a-form :model="policyForm" layout="vertical">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="策略名称" name="name">
              <a-input
                v-model:value="policyForm.name"
                placeholder="请输入策略名称"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="策略类型" name="type">
              <a-select
                v-model:value="policyForm.type"
                placeholder="请选择策略类型"
              >
                <a-select-option value="ACCESS_CONTROL">
                  访问控制
                </a-select-option>
                <a-select-option value="DATA_PROTECTION">
                  数据保护
                </a-select-option>
                <a-select-option value="RESOURCE_LIMITS">
                  资源限制
                </a-select-option>
                <a-select-option value="COMPLIANCE">合规性</a-select-option>
                <a-select-option value="SECURITY">安全性</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="描述" name="description">
          <a-textarea
            v-model:value="policyForm.description"
            placeholder="请输入策略描述"
            :rows="3"
          />
        </a-form-item>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="优先级" name="priority">
              <a-select
                v-model:value="policyForm.priority"
                placeholder="请选择优先级"
              >
                <a-select-option value="LOW">低</a-select-option>
                <a-select-option value="MEDIUM">中</a-select-option>
                <a-select-option value="HIGH">高</a-select-option>
                <a-select-option value="CRITICAL">严重</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="执行模式" name="enforcement">
              <a-select
                v-model:value="policyForm.enforcement"
                placeholder="请选择执行模式"
              >
                <a-select-option value="ENFORCE">强制执行</a-select-option>
                <a-select-option value="ADVISE">建议</a-select-option>
                <a-select-option value="AUDIT">审计</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="策略条件" name="conditions">
          <div class="conditions-editor">
            <a-button @click="addCondition" type="dashed" block>
              <IconifyIcon icon="ant-design:plus-outlined" />
              添加条件
            </a-button>

            <div v-if="policyForm.conditions" class="conditions-list">
              <div
                v-for="(condition, index) in policyForm.conditions"
                :key="index"
                class="condition-item"
              >
                <a-row :gutter="8">
                  <a-col :span="6">
                    <a-select
                      v-model:value="condition.field"
                      placeholder="字段"
                    >
                      <a-select-option value="resource.type">
                        资源类型
                      </a-select-option>
                      <a-select-option value="resource.status">
                        资源状态
                      </a-select-option>
                      <a-select-option value="user.role">
                        用户角色
                      </a-select-option>
                      <a-select-option value="access.time">
                        访问时间
                      </a-select-option>
                    </a-select>
                  </a-col>
                  <a-col :span="4">
                    <a-select
                      v-model:value="condition.operator"
                      placeholder="操作符"
                    >
                      <a-select-option value="EQ">等于</a-select-option>
                      <a-select-option value="NE">不等于</a-select-option>
                      <a-select-option value="GT">大于</a-select-option>
                      <a-select-option value="LT">小于</a-select-option>
                      <a-select-option value="IN">包含</a-select-option>
                    </a-select>
                  </a-col>
                  <a-col :span="10">
                    <a-input v-model:value="condition.value" placeholder="值" />
                  </a-col>
                  <a-col :span="4">
                    <a-button
                      type="text"
                      danger
                      @click="removeCondition(index)"
                    >
                      <IconifyIcon icon="ant-design:delete-outlined" />
                    </a-button>
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
        </a-form-item>

        <a-form-item label="策略动作" name="actions">
          <div class="actions-editor">
            <a-button @click="addAction" type="dashed" block>
              <IconifyIcon icon="ant-design:plus-outlined" />
              添加动作
            </a-button>

            <div v-if="policyForm.actions" class="actions-list">
              <div
                v-for="(action, index) in policyForm.actions"
                :key="index"
                class="action-item"
              >
                <a-row :gutter="8">
                  <a-col :span="6">
                    <a-select
                      v-model:value="action.type"
                      placeholder="动作类型"
                    >
                      <a-select-option value="ALLOW">允许</a-select-option>
                      <a-select-option value="DENY">拒绝</a-select-option>
                      <a-select-option value="LOG">记录</a-select-option>
                      <a-select-option value="NOTIFY">通知</a-select-option>
                    </a-select>
                  </a-col>
                  <a-col :span="12">
                    <a-input
                      v-model:value="action.parameters"
                      placeholder="参数（JSON格式）"
                    />
                  </a-col>
                  <a-col :span="4">
                    <a-button type="text" danger @click="removeAction(index)">
                      <IconifyIcon icon="ant-design:delete-outlined" />
                    </a-button>
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 违规详情模态框 -->
    <a-modal
      v-model:open="violationDetailModalVisible"
      title="违规详情"
      width="600px"
      :footer="null"
    >
      <div v-if="selectedViolation" class="violation-detail">
        <a-descriptions title="违规信息" :column="2">
          <a-descriptions-item label="策略名称">
            {{ selectedViolation.policyName }}
          </a-descriptions-item>
          <a-descriptions-item label="违规类型">
            <a-tag :color="getComplianceStatusColor(selectedViolation.status)">
              {{ getComplianceStatusLabel(selectedViolation.status) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="发现时间">
            {{ formatDate(selectedViolation.timestamp) }}
          </a-descriptions-item>
          <a-descriptions-item label="严重程度">
            {{ selectedViolation.severity }}
          </a-descriptions-item>
        </a-descriptions>

        <a-divider />

        <a-descriptions title="违规详情" :column="1">
          <a-descriptions-item label="描述">
            {{ selectedViolation.description }}
          </a-descriptions-item>
          <a-descriptions-item label="影响范围">
            {{ selectedViolation.scope }}
          </a-descriptions-item>
        </a-descriptions>

        <a-divider />

        <a-descriptions title="修复建议" :column="1">
          <a-descriptions-item label="建议">
            {{ selectedViolation.recommendation }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-modal>

    <!-- 审计详情模态框 -->
    <a-modal
      v-model:open="auditDetailModalVisible"
      title="审计详情"
      width="800px"
      :footer="null"
    >
      <div v-if="selectedAuditEvent" class="audit-detail">
        <a-descriptions title="事件信息" :column="2">
          <a-descriptions-item label="事件类型">
            <a-tag :color="getAuditEventColor(selectedAuditEvent.eventType)">
              {{ getAuditEventLabel(selectedAuditEvent.eventType) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="时间">
            {{ formatDate(selectedAuditEvent.timestamp) }}
          </a-descriptions-item>
          <a-descriptions-item label="用户">
            {{ selectedAuditEvent.user }}
          </a-descriptions-item>
          <a-descriptions-item label="IP地址">
            {{ selectedAuditEvent.ipAddress }}
          </a-descriptions-item>
        </a-descriptions>

        <a-divider />

        <a-descriptions title="事件详情" :column="1">
          <a-descriptions-item label="资源">
            {{ selectedAuditEvent.resource }}
          </a-descriptions-item>
          <a-descriptions-item label="操作">
            {{ selectedAuditEvent.action }}
          </a-descriptions-item>
          <a-descriptions-item label="结果">
            {{ selectedAuditEvent.result }}
          </a-descriptions-item>
        </a-descriptions>

        <a-divider v-if="selectedAuditEvent.details" />

        <a-descriptions
          v-if="selectedAuditEvent.details"
          title="详细信息"
          :column="1"
        >
          <a-descriptions-item label="详情">
            <pre class="audit-details">{{
              JSON.stringify(selectedAuditEvent.details, null, 2)
            }}</pre>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-modal>
  </div>
</template>

<style lang="less" scoped>
.resource-governance {
  .governance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    h3 {
      margin: 0;
    }
  }

  .governance-card {
    margin-bottom: 16px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .policies-section {
    .policies-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
      gap: 12px;
    }

    .policy-card {
      .policy-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .policy-info {
        margin-bottom: 8px;

        p {
          margin: 4px 0;
          font-size: 12px;
        }
      }

      .policy-actions {
        display: flex;
        gap: 4px;
      }
    }
  }

  .compliance-section {
    .compliance-results {
      margin-top: 16px;
    }
  }

  .audit-section {
    .audit-details {
      background: #f5f5f5;
      padding: 8px;
      border-radius: 4px;
      font-family: monospace;
      font-size: 12px;
      white-space: pre-wrap;
    }
  }

  .conditions-editor,
  .actions-editor {
    .conditions-list,
    .actions-list {
      margin-top: 12px;

      .condition-item,
      .action-item {
        margin-bottom: 8px;
        padding: 8px;
        border: 1px solid #f0f0f0;
        border-radius: 4px;
        background: #fafafa;
      }
    }
  }

  .violation-detail,
  .audit-detail {
    .ant-descriptions-item-label {
      font-weight: 500;
    }
  }
}
</style>
